﻿<!--
 * # 模块 HTML:
 *  Organization - 组织管理
 *
 * # 描述:
 *  向系统管理人员提供组织结构、部门以及岗位的管理功能，包括为组织、部门或岗位添加用户，以及设置组织、部门或岗位的权限。
 *
 * Copyright (c), 上海沃恩信息科技有限公司.
 * All rights reserved.
 * Licensed under BSD (https://www.pittypat.work/bsd.html).
-->

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <title>组织管理 | 组织与用户</title>

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="author" content="上海沃恩信息科技有限公司" />

    <link rel="icon" type="image/png" href="../app.png" />

    <link rel="stylesheet" href="../../../../mdc/material-components-web.min.css" />
    <link rel="stylesheet" href="../../../../css/pittypat.css" />
    <style>
        .org-icon {
            color: #0088C7;
        }

        .dept-icon {
            color: #209E85;
        }

        .post-icon {
            color: #ED6F00;
        }

        .model-user-face {
            border-radius: 50%;
        }

        .model-user > header > .pt-row-icon,
        .model-searched-user > header > .pt-row-icon {
            position: relative;
        }

        .lock-indicator {
            position: absolute;
            left: 52px;
            top: 16px;
            height: 16px;
            width: 16px;
            font-size: 16px;
            color: #ff3d00;
            color: var(--mdc-theme-accent, #ff3d00);
            display: none;
        }

        #search-users-dialog .mdc-dialog__header {
            flex-direction: column;
            align-items: stretch;
        }

        #search-users-panel {
            display: flex;
            align-items: center;
        }

            #search-users-panel > .pt-fields {
                flex: 1 1 auto;
            }

        #search-users-button,
        #add-users-button,
        #load-more {
            flex: 0 0 auto;
            background: none;
            border: none;
            padding: 0;
            margin: 0 0 0 16px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        button:disabled > i {
            color: rgba(0,0,0,0.38);
            color: var(--mdc-theme-text-disabled-on-background, rgba(0,0,0,0.38));
        }

        #search,
        #load-more {
            background: none;
            border: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #loaded-summary {
            margin: 16px 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        #loaded-rows,
        #total-rows {
            color: rgba(0,0,0,0.54);
        }

            #loaded-rows::after {
                content: ' / ';
            }
    </style>
</head>
<body class="pt-nav-pinned">
    <!-- 页眉 -->
    <header>
        <section class="pt-page-toolbar">
            <button class="pt-nav-toggle mdc-ripple-surface" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple">
                <i class="material-icons">menu</i>
            </button>
            <h1 class="pt-page-title">组织管理</h1>
            <button class="mdc-ripple-surface" data-target-dialog="#add-org-dialog" type="button" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple">
                <i class="material-icons">add</i>
            </button>
            <button class="pt-nc-toggle mdc-ripple-surface" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple">
                <i class="material-icons">chat_bubble_outline</i>
                <b></b>
            </button>
            <button class="pt-page-menu-toggle mdc-ripple-surface" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple">
                <i class="material-icons">more_vert</i>
            </button>
            <div class="pt-page-menu mdc-simple-menu mdc-simple-menu--open-from-top-right" tabindex="-1">
                <div class="mdc-simple-menu__items mdc-list" role="menu" aria-hidden="true">
                    <a class="mdc-list-item pt-page-refresh" role="menuitem" tabindex="0">
                        <i class="material-icons mdc-list-item__start-detail">refresh</i>
                        <span>刷新页面</span>
                    </a>
                    <div class="mdc-list-divider" role="separator"></div>
                    <a class="mdc-list-item" role="menuitem" tabindex="0" href="help/index.html" target="_blank">
                        <i class="material-icons mdc-list-item__start-detail">help_outline</i>
                        <span>查看帮助</span>
                    </a>
                    <div class="mdc-list-divider pt-page-menu-logout-divider" role="separator"></div>
                    <a class="mdc-list-item pt-page-menu-logout" role="menuitem">
                        <i class="material-icons mdc-list-item__start-detail">power_settings_new</i>
                        <span>退出</span>
                    </a>
                </div>
            </div>
        </section>
    </header>

    <!-- 工作区 -->
    <main class="pt-main" role="main">
        <article class="pt-row">
            <section class="mdc-elevation--z1" id="orgs"></section>
        </article>
    </main>

    <!-- 对话框 -->
    <div class="pt-menus-dialogs">
        <!-- 组织菜单 -->
        <div id="model-org-menu" class="mdc-simple-menu mdc-simple-menu--open-from-top-right" tabindex="-1">
            <ul class="mdc-simple-menu__items mdc-list mdc-elevation--z9" role="menu" aria-hidden="true">
                <li class="mdc-list-item" role="menuitem" tabindex="0" data-target-dialog="#apps-dialog">
                    <i class="material-icons mdc-list-item__start-detail">security</i>
                    <span>权限</span>
                </li>
                <li class="mdc-list-divider" role="separator"></li>
                <li class="mdc-list-item" role="menuitem" tabindex="0" data-target-dialog="#add-dept-dialog">
                    <i class="material-icons mdc-list-item__start-detail">domain</i>
                    <span>添加新部门</span>
                </li>
                <li class="mdc-list-item" role="menuitem" tabindex="0" data-target-dialog="#add-post-dialog">
                    <i class="material-icons mdc-list-item__start-detail">group</i>
                    <span>添加新岗位</span>
                </li>
                <li class="mdc-list-item" role="menuitem" tabindex="0" data-target-dialog="#search-users-dialog">
                    <i class="material-icons mdc-list-item__start-detail">person</i>
                    <span>添加用户</span>
                </li>
                <li class="mdc-list-divider" role="separator"></li>
                <li class="mdc-list-item" role="menuitem" tabindex="0" data-target-dialog="#edit-org-dialog">
                    <i class="material-icons mdc-list-item__start-detail">mode_edit</i>
                    <span>设置</span>
                </li>
                <li class="mdc-list-divider" role="separator"></li>
                <li class="mdc-list-item" role="menuitem" tabindex="0">
                    <i class="material-icons mdc-list-item__start-detail">delete_forever</i>
                    <span>删除</span>
                </li>
            </ul>
        </div>

        <!-- 部门菜单 -->
        <div id="model-dept-menu" class="mdc-simple-menu mdc-simple-menu--open-from-top-right" tabindex="-1">
            <ul class="mdc-simple-menu__items mdc-list mdc-elevation--z9" role="menu" aria-hidden="true">
                <li class="mdc-list-item" role="menuitem" tabindex="0" data-target-dialog="#apps-dialog">
                    <i class="material-icons mdc-list-item__start-detail">security</i>
                    <span>权限</span>
                </li>
                <li class="mdc-list-divider" role="separator"></li>
                <li class="mdc-list-item" role="menuitem" tabindex="0" data-target-dialog="#add-dept-dialog">
                    <i class="material-icons mdc-list-item__start-detail">domain</i>
                    <span>添加新部门</span>
                </li>
                <li class="mdc-list-item" role="menuitem" tabindex="0" data-target-dialog="#add-post-dialog">
                    <i class="material-icons mdc-list-item__start-detail">group</i>
                    <span>添加新岗位</span>
                </li>
                <li class="mdc-list-item" role="menuitem" tabindex="0" data-target-dialog="#search-users-dialog">
                    <i class="material-icons mdc-list-item__start-detail">person</i>
                    <span>添加用户</span>
                </li>
                <li class="mdc-list-divider" role="separator"></li>
                <li class="mdc-list-item" role="menuitem" tabindex="0" data-target-dialog="#edit-dept-dialog">
                    <i class="material-icons mdc-list-item__start-detail">mode_edit</i>
                    <span>设置</span>
                </li>
                <li class="mdc-list-divider" role="separator"></li>
                <li class="mdc-list-item" role="menuitem" tabindex="0">
                    <i class="material-icons mdc-list-item__start-detail">delete_forever</i>
                    <span>删除</span>
                </li>
            </ul>
        </div>

        <!-- 岗位菜单 -->
        <div id="model-post-menu" class="mdc-simple-menu mdc-simple-menu--open-from-top-right" tabindex="-1">
            <ul class="mdc-simple-menu__items mdc-list mdc-elevation--z9" role="menu" aria-hidden="true">
                <li class="mdc-list-item" role="menuitem" tabindex="0" data-target-dialog="#apps-dialog">
                    <i class="material-icons mdc-list-item__start-detail">security</i>
                    <span>权限</span>
                </li>
                <li class="mdc-list-divider" role="separator"></li>
                <li class="mdc-list-item" role="menuitem" tabindex="0" data-target-dialog="#search-users-dialog">
                    <i class="material-icons mdc-list-item__start-detail">person</i>
                    <span>添加用户</span>
                </li>
                <li class="mdc-list-divider" role="separator"></li>
                <li class="mdc-list-item" role="menuitem" tabindex="0" data-target-dialog="#edit-post-dialog">
                    <i class="material-icons mdc-list-item__start-detail">mode_edit</i>
                    <span>设置</span>
                </li>
                <li class="mdc-list-divider" role="separator"></li>
                <li class="mdc-list-item" role="menuitem" tabindex="0">
                    <i class="material-icons mdc-list-item__start-detail">delete_forever</i>
                    <span>删除</span>
                </li>
            </ul>
        </div>

        <!-- 用户菜单 -->
        <div id="model-user-menu" class="mdc-simple-menu mdc-simple-menu--open-from-top-right" tabindex="-1">
            <ul class="mdc-simple-menu__items mdc-list mdc-elevation--z9" role="menu" aria-hidden="true">
                <li class="mdc-list-item" role="menuitem" tabindex="0" data-target-dialog="#apps-dialog">
                    <i class="material-icons mdc-list-item__start-detail">security</i>
                    <span>权限</span>
                </li>
                <li class="mdc-list-divider" role="separator"></li>
                <li class="mdc-list-item" role="menuitem" tabindex="0" data-target-dialog="#edit-user-dialog">
                    <i class="material-icons mdc-list-item__start-detail">assignment</i>
                    <span>备注</span>
                </li>
                <li class="mdc-list-divider" role="separator"></li>
                <li class="mdc-list-item" role="menuitem" tabindex="0">
                    <i class="material-icons mdc-list-item__start-detail">cancel</i>
                    <span>移除</span>
                </li>
            </ul>
        </div>

        <!-- 添加新组织对话框 -->
        <div class="mdc-dialog small-dialog" id="add-org-dialog">
            <article class="mdc-dialog__surface">
                <header class="mdc-dialog__header">
                    <h2 class="mdc-dialog__header__title" id="add-org-dialog-title">新组织</h2>
                </header>
                <section class="mdc-dialog__body mdc-dialog__body--scrollable" id="add-org-dialog-body">
                    <div class="pt-fields">
                        <div class="pt-field required">
                            <label>
                                <b>名称</b>
                                <input type="text" id="add-org-name" maxlength="50" required autocomplete="off" />
                            </label>
                        </div>
                        <div class="pt-field">
                            <label>
                                <textarea id="add-org-description" placeholder="描述" maxlength="2000" rows="5" autocomplete="off"></textarea>
                            </label>
                        </div>
                    </div>
                </section>
                <footer class="mdc-dialog__footer">
                    <a class="pt-dialog-footer-help" href="help/index.html#add-org" target="_blank">
                        <i class="material-icons">help_outline</i>
                    </a>
                    <div></div>
                    <button type="button" class="mdc-button mdc-dialog__footer__button" data-cancel>取消</button>
                    <button type="button" class="mdc-button mdc-dialog__footer__button mdc-button--primary" data-ok>确定</button>
                </footer>
            </article>
            <div class="mdc-dialog__backdrop"></div>
        </div>

        <!-- 设置组织对话框 -->
        <div class="mdc-dialog small-dialog" id="edit-org-dialog">
            <article class="mdc-dialog__surface">
                <header class="mdc-dialog__header">
                    <h2 class="mdc-dialog__header__title" id="edit-org-dialog-title">组织</h2>
                </header>
                <section class="mdc-dialog__body mdc-dialog__body--scrollable" id="edit-org-dialog-body">
                    <div class="pt-fields">
                        <div class="pt-field required">
                            <label>
                                <b>名称</b>
                                <input type="text" id="edit-org-name" maxlength="50" required autocomplete="off" />
                            </label>
                        </div>
                        <div class="pt-field">
                            <label>
                                <textarea id="edit-org-description" placeholder="描述" maxlength="2000" rows="5" autocomplete="off"></textarea>
                            </label>
                        </div>
                    </div>
                </section>
                <footer class="mdc-dialog__footer">
                    <a class="pt-dialog-footer-help" href="help/index.html#edit-org" target="_blank">
                        <i class="material-icons">help_outline</i>
                    </a>
                    <div></div>
                    <button type="button" class="mdc-button mdc-dialog__footer__button" data-cancel>取消</button>
                    <button type="button" class="mdc-button mdc-dialog__footer__button mdc-button--primary" data-ok>确定</button>
                </footer>
            </article>
            <div class="mdc-dialog__backdrop"></div>
        </div>

        <!-- 添加新部门对话框 -->
        <div class="mdc-dialog small-dialog" id="add-dept-dialog">
            <article class="mdc-dialog__surface">
                <header class="mdc-dialog__header">
                    <h2 class="mdc-dialog__header__title" id="add-dept-dialog-title">新部门</h2>
                </header>
                <section class="mdc-dialog__body mdc-dialog__body--scrollable" id="add-dept-dialog-body">
                    <div class="pt-fields">
                        <div class="pt-field required">
                            <label>
                                <b>名称</b>
                                <input type="text" id="add-dept-name" maxlength="50" required autocomplete="off" />
                            </label>
                        </div>
                        <div class="pt-field">
                            <label>
                                <textarea id="add-dept-description" placeholder="描述" maxlength="2000" rows="5" autocomplete="off"></textarea>
                            </label>
                        </div>
                    </div>
                </section>
                <footer class="mdc-dialog__footer">
                    <a class="pt-dialog-footer-help" href="help/index.html#add-dept" target="_blank">
                        <i class="material-icons">help_outline</i>
                    </a>
                    <div></div>
                    <button type="button" class="mdc-button mdc-dialog__footer__button" data-cancel>取消</button>
                    <button type="button" class="mdc-button mdc-dialog__footer__button mdc-button--primary" data-ok>确定</button>
                </footer>
            </article>
            <div class="mdc-dialog__backdrop"></div>
        </div>

        <!-- 设置部门对话框 -->
        <div class="mdc-dialog small-dialog" id="edit-dept-dialog">
            <article class="mdc-dialog__surface">
                <header class="mdc-dialog__header">
                    <h2 class="mdc-dialog__header__title" id="edit-dept-dialog-title">部门</h2>
                </header>
                <section class="mdc-dialog__body mdc-dialog__body--scrollable" id="edit-dept-dialog-body">
                    <div class="pt-fields">
                        <div class="pt-field required">
                            <label>
                                <b>名称</b>
                                <input type="text" id="edit-dept-name" maxlength="50" required autocomplete="off" />
                            </label>
                        </div>
                        <div class="pt-field">
                            <label>
                                <textarea id="edit-dept-description" placeholder="描述" maxlength="2000" rows="5" autocomplete="off"></textarea>
                            </label>
                        </div>
                    </div>
                </section>
                <footer class="mdc-dialog__footer">
                    <a class="pt-dialog-footer-help" href="help/index.html#edit-dept" target="_blank">
                        <i class="material-icons">help_outline</i>
                    </a>
                    <div></div>
                    <button type="button" class="mdc-button mdc-dialog__footer__button" data-cancel>取消</button>
                    <button type="button" class="mdc-button mdc-dialog__footer__button mdc-button--primary" data-ok>确定</button>
                </footer>
            </article>
            <div class="mdc-dialog__backdrop"></div>
        </div>

        <!-- 添加新岗位对话框 -->
        <div class="mdc-dialog small-dialog" id="add-post-dialog">
            <article class="mdc-dialog__surface">
                <header class="mdc-dialog__header">
                    <h2 class="mdc-dialog__header__title" id="add-post-dialog-title">新岗位</h2>
                </header>
                <section class="mdc-dialog__body mdc-dialog__body--scrollable" id="add-post-dialog-body">
                    <div class="pt-fields">
                        <div class="pt-field required">
                            <label>
                                <b>名称</b>
                                <input type="text" id="add-post-name" maxlength="50" required autocomplete="off" />
                            </label>
                        </div>
                        <div class="pt-field">
                            <label>
                                <textarea id="add-post-description" placeholder="描述" maxlength="2000" rows="5" autocomplete="off"></textarea>
                            </label>
                        </div>
                    </div>
                </section>
                <footer class="mdc-dialog__footer">
                    <a class="pt-dialog-footer-help" href="help/index.html#add-post" target="_blank">
                        <i class="material-icons">help_outline</i>
                    </a>
                    <div></div>
                    <button type="button" class="mdc-button mdc-dialog__footer__button" data-cancel>取消</button>
                    <button type="button" class="mdc-button mdc-dialog__footer__button mdc-button--primary" data-ok>确定</button>
                </footer>
            </article>
            <div class="mdc-dialog__backdrop"></div>
        </div>

        <!-- 设置岗位对话框 -->
        <div class="mdc-dialog small-dialog" id="edit-post-dialog">
            <article class="mdc-dialog__surface">
                <header class="mdc-dialog__header">
                    <h2 class="mdc-dialog__header__title" id="edit-post-dialog-title">岗位</h2>
                </header>
                <section class="mdc-dialog__body mdc-dialog__body--scrollable" id="edit-post-dialog-body">
                    <div class="pt-fields">
                        <div class="pt-field required">
                            <label>
                                <b>名称</b>
                                <input type="text" id="edit-post-name" maxlength="50" required autocomplete="off" />
                            </label>
                        </div>
                        <div class="pt-field">
                            <label>
                                <textarea id="edit-post-description" placeholder="描述" maxlength="2000" rows="5" autocomplete="off"></textarea>
                            </label>
                        </div>
                    </div>
                </section>
                <footer class="mdc-dialog__footer">
                    <a class="pt-dialog-footer-help" href="help/index.html#edit-post" target="_blank">
                        <i class="material-icons">help_outline</i>
                    </a>
                    <div></div>
                    <button type="button" class="mdc-button mdc-dialog__footer__button" data-cancel>取消</button>
                    <button type="button" class="mdc-button mdc-dialog__footer__button mdc-button--primary" data-ok>确定</button>
                </footer>
            </article>
            <div class="mdc-dialog__backdrop"></div>
        </div>

        <!-- 设置用户对话框 -->
        <div class="mdc-dialog small-dialog" id="edit-user-dialog">
            <article class="mdc-dialog__surface">
                <header class="mdc-dialog__header">
                    <h2 class="mdc-dialog__header__title" id="edit-user-dialog-title">用户</h2>
                </header>
                <section class="mdc-dialog__body mdc-dialog__body--scrollable" id="edit-user-dialog-body">
                    <div class="pt-fields">
                        <div class="pt-field">
                            <label>
                                <textarea id="edit-user-description" placeholder="备注" maxlength="2000" rows="8" autocomplete="off"></textarea>
                            </label>
                        </div>
                    </div>
                </section>
                <footer class="mdc-dialog__footer">
                    <a class="pt-dialog-footer-help" href="help/index.html#edit-user" target="_blank">
                        <i class="material-icons">help_outline</i>
                    </a>
                    <div></div>
                    <button type="button" class="mdc-button mdc-dialog__footer__button" data-cancel>取消</button>
                    <button type="button" class="mdc-button mdc-dialog__footer__button mdc-button--primary" data-ok>确定</button>
                </footer>
            </article>
            <div class="mdc-dialog__backdrop"></div>
        </div>

        <!-- 权限对话框 -->
        <div class="mdc-dialog" id="apps-dialog">
            <article class="mdc-dialog__surface">
                <header class="mdc-dialog__header">
                    <h2 class="mdc-dialog__header__title" id="apps-dialog-title">设置权限</h2>
                </header>
                <section class="mdc-dialog__body mdc-dialog__body--scrollable" id="apps-dialog-body">
                    <article class="pt-row">
                        <section id="apps"></section>
                    </article>
                </section>
                <footer class="mdc-dialog__footer">
                    <a class="pt-dialog-footer-help" href="help/index.html#apps" target="_blank">
                        <i class="material-icons">help_outline</i>
                    </a>
                    <div></div>
                    <button type="button" class="mdc-button mdc-dialog__footer__button" data-cancel>关闭</button>
                </footer>
            </article>
            <div class="mdc-dialog__backdrop"></div>
        </div>

        <!-- 用户对话框 -->
        <div class="mdc-dialog" id="search-users-dialog">
            <article class="mdc-dialog__surface">
                <header class="mdc-dialog__header">
                    <h2 class="mdc-dialog__header__title" id="search-users-dialog-title">添加用户</h2>
                    <div id="search-users-panel">
                        <input type="hidden" id="search-users-page-index" value="1" />

                        <div class="pt-fields pt-fields-horiz">
                            <div class="pt-field">
                                <label>
                                    <input type="text" id="search-users-keyword" placeholder="名称/编号/手机/邮箱" maxlength="50" autocomplete="off" />
                                </label>
                            </div>
                        </div>

                        <button id="search-users-button" class="mdc-ripple-surface mdc-ripple-surface--primary mdc-theme--primary" type="button" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple">
                            <i class="material-icons">search</i>
                        </button>

                        <button id="add-users-button" disabled class="mdc-ripple-surface mdc-ripple-surface--primary mdc-theme--primary" type="button" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple">
                            <i class="material-icons">add</i>
                        </button>
                    </div>
                </header>
                <section class="mdc-dialog__body mdc-dialog__body--scrollable" id="search-users-dialog-body">
                    <article class="pt-row">
                        <header>
                            <div class="pt-row-icon">
                                <i class="pt-row-toggle material-icons mdc-ripple-surface mdc-ripple-surface--primary mdc-theme--primary" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple">
                                    check_box_outline_blank
                                </i>
                            </div>
                            <div class="pt-row-info">
                                <div>
                                    <label>名称</label>
                                </div>
                                <div class="w-5 hidden-phone">
                                    <label>编号</label>
                                </div>
                                <div class="w-7 hidden-phone">
                                    <label>手机</label>
                                </div>
                                <div class="w-13 hidden-phone">
                                    <label>邮箱</label>
                                </div>
                            </div>
                        </header>
                        <section id="searched-users"></section>
                    </article>

                    <div id="loaded-summary">
                        <div><span id="loaded-rows">0</span><span id="total-rows">0</span></div>
                        <button id="load-more" class="mdc-ripple-surface mdc-ripple-surface--primary mdc-theme--primary" type="button" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple">
                            <i class="material-icons">more_horiz</i>
                        </button>
                    </div>
                </section>
                <footer class="mdc-dialog__footer">
                    <a class="pt-dialog-footer-help" href="help/index.html#search-users" target="_blank">
                        <i class="material-icons">help_outline</i>
                    </a>
                    <div></div>
                    <button type="button" class="mdc-button mdc-dialog__footer__button" data-cancel>关闭</button>
                </footer>
            </article>
            <div class="mdc-dialog__backdrop"></div>
        </div>
    </div>

    <!-- 导航列表 -->
    <nav class="pt-nav">
        <article class="pt-nav-panel">
            <header>
                <div class="pt-nav-toolbar">
                    <a class="mdc-ripple-surface" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple" href="../../../../index.html" title="返回首页">
                        <i class="material-icons">home</i>
                    </a>
                    <a class="pt-nav-refresh mdc-ripple-surface" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple" title="刷新导航">
                        <i class="material-icons">update</i>
                    </a>
                    <a class="pt-nav-pin mdc-ripple-surface" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple" title="取消固定导航">
                        <i class="material-icons">call_received</i>
                    </a>
                </div>
                <div class="pt-nav-userbar">
                    <a href="../../../waln/authority/profile/index.html">
                        <i class="material-icons">account_circle</i>
                        <b>未登录</b>
                    </a>
                </div>
            </header>
            <section></section>
        </article>
        <!-- 导航列表的背景，不要移除该元素 -->
        <div></div>
    </nav>

    <!-- 通知中心 -->
    <aside class="pt-nc">
        <article class="pt-nc-panel">
            <header>
                <a class="pt-nc-close mdc-ripple-surface" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple" data-nc-close>
                    <i class="material-icons">close</i>
                </a>
                <h1>通知中心</h1>
                <a class="mdc-ripple-surface" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple" href="../../../waln/notifying/inbox/list.html" title="所有已接收">
                    <i class="material-icons">inbox</i>
                </a>
            </header>
            <section></section>
        </article>
        <!-- 通知中心的背景，不要移除该元素 -->
        <div></div>
    </aside>

    <script src="../../../../js/jquery.min.js"></script>
    <script src="../../../../mdc/material-components-web.min.js"></script>
    <script src="../../../../js/pittypat.js"></script>
    <script src="_api.js"></script>
    <script src="orgs.js"></script>
</body>
</html>